<template>
  <DialogBox :title="type === 0 ? 'S3输入' : 'S3输出'" :visible="showS3Dialog" :confirm="surebtn" :close="onClose">
    <div>
      <el-button type="text" @click="addS3">添加</el-button>
      <el-table v-if="checkS3s.length > 0" :data="checkS3s" class="code-detail-table"
                header-row-class-name="code-detail-table-header">

        <!-- <el-table-column prop="protocol" label="协议" /> -->

        <el-table-column prop="s3_name" label="名称">
          <template slot-scope="{ row }">
            <el-input type="text" v-model="row.s3_name"/>
          </template>
        </el-table-column>
        <el-table-column prop="s3_id" label="桶">
          <template slot-scope="{ row }">
            <el-select v-model="row.s3_id">
              <el-option v-for="item in s3Options" :value="item.id" :label="item.name" :key="item.id">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路径">
          <template slot-scope="{ row }">
            <el-input type="text" v-model="row.path"/>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="操作">
          <template slot-scope="{ row }">
            <!--<el-button type="text" @click="put(row)">修改</el-button>-->
            <el-button type="text" @click="removetag(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br/>
      <!-- <el-button class="none-type" type="primary" @click="surebtn">保存</el-button> -->
      <!-- <el-button class="none-type" @click="onClose">取消</el-button> -->
    </div>
  </DialogBox>
</template>

<script>
import DialogBox from '@/components/module/dialog-box.vue';
import {getAllAssetS3} from '@/api/inout'

export default {
  name: 'plugInS3',
  data() {
    return {
      showSelectDialog: false,
      checkS3s: [],
      s3Options: [],
    }
  },
  props: ["s3_list", "type", "showS3Dialog"],
  watch: {
    s3_list(val) {
      console.log(val)
      this.checkS3s = val.map(e => e.s3_list || e)
    }
  },
  components: {
    DialogBox,
  },
  methods: {
    async getS3s() {
      let res = await getAllAssetS3({});
      this.s3Options = res.data
    },
    surebtn() {
      for (let index in this.checkS3s) {
        let item = this.checkS3s[index]
        if (item.s3_name == null) {
          alert("名称不能为空")
          return
        }
        if (item.s3_id == null) {
          alert("桶不能为空")
          return
        }
        if (item.path == null) {
          alert("路径不能为空")
          return
        }

        console.log(this.checkS3s, "click");

      }
      this.$emit('infoS3', this.checkS3s)
      this.showSelectDialog = false;
      this.$emit('onClose', false)
    },
    removetag(data) {
      // this.checkS3s.splice(index, 1);
      this.checkS3s = this.checkS3s.filter(item => {
        if (item.id) {
          return item.id !== data.id
        } else {
          return item.s3_id !== data.s3_id
        }
      })
      this.checkS3s = JSON.parse(JSON.stringify(this.checkS3s))
      console.log(this.checkS3s)

    },
    addS3() {
      this.checkS3s.push({type: this.type})

      console.log(this.checkS3s, "pushS3");
    },
    onClose() {
      this.$emit('onClose', false)
    },
    initCheckS3s() {
      if (!this.s3_list) return
      this.checkS3s = this.s3_list
    },
  },
  mounted() {
    this.getS3s()
    this.initCheckS3s()

  },
  destroyed() {

  }
}
</script>

<style lang="less" scoped>
.myself-dataset-checkbox {
  display: flex;

  /deep/ .el-checkbox__input {
    padding-top: 28px;
  }
}


.infinite-list {
  min-height: 380px;
  padding: 20px 0;
}

.infinite-list-item {
  margin-bottom: 20px;
  float: left;
  //width: 496px;
  width: 992px;
}

.elrowgutter {
  /deep/ .el-button--default {
    margin-left: 100px;
    width: 80%;
    background-color: #f5f7fa;
    color: #1e2480;
    margin-bottom: 20px;
  }

  /deep/ .el-form-item__label {
    text-align: right;
    padding-right: 30px;
  }
}

.delnode {
  margin-left: 73%;
}

.run-model-title {
  color: #303133;
}

.run-model-table {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 0 8px;
  margin-top: 6px;

  .r-m-box {
    border-top: 1px solid #e8e8e8;
    height: 38px;
    line-height: 38px;

    .r-m-name {
      float: left;
      width: 148px;
      padding-left: 14px;
    }

    .r-m-product {
      float: left;
      width: 250px;
    }

    .r-m-command {
      float: left;
      width: 120px;

      .popover {
        cursor: pointer;

        i {
          font-size: 16px;
          color: #4285F4;
        }
      }
    }

    .r-m-number {
      float: left;
    }
  }

  .no-border {
    border: 0;
  }
}

.el-tooltip__popper {
  max-width: 400px;
  line-height: 180%;
}

.checkbox-true {
  // background: url(~@/assets/img/checkbox-true.jpg) no-repeat;
  background-size: 18px 18px;
}

.checkbox-false {
  // background: url(~@/assets/img/checkbox-false.jpg) no-repeat;
  background-size: 18px 18px;
}

.adorn-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  float: left;
  margin-top: 20px;
  margin-right: 10px;
}

.dimg {
  width: 123px;
  height: 75px;
  float: left;
}

.datas-box {
  float: left;
  width: 296px;

  .datasname {
    vertical-align: top;
    font-weight: 800;
    font-size: 16px;
    line-height: 22px;
    overflow: hidden;
    display: -webkit-box; //将元素设为盒子伸缩模型显示
    -webkit-box-orient: vertical; //伸缩方向设为垂直方向
    -webkit-line-clamp: 1;
  }

  .pcontents {
    margin: 15px 0 0 5px;
    font-size: 14px;
    color: #606266;
    line-height: 24px;
    margin-top: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .pall {
    overflow: hidden;
    margin-left: 5px;
  }
}

.version-box {
  float: right;

  .sb {
    /deep/ .el-input.el-input__inner {
      border-color: #4285f4 !important;
      font-size: 12;
    }
  }
}

.dataset-tags-box {
  // width: 240px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;

  .dataset-addr {
    padding-left: 10px;
    line-height: 30px;
    float: left;
  }

  .delstr {
    color: red;
  }
}

.dataset-tags {
  // display: block;
  // max-width: 240px;
  float: left;

  /deep/ .el-tag__close {
    float: left;
    margin-top: 6px;
  }

  .dataset-tags-word {
    // display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    width: 140px;
    float: left;
  }
}
</style>
